<script setup>
import { onMounted, reactive, ref } from "vue";
import Dialog from "@/components/Dialog.vue";
import Pagination from "./pagination.vue";
import { getCqData_job } from "@/api/stud";
import { useUserStore } from "@/stores/user";

const props = defineProps(["visible", "title"]);

const emits = defineEmits(["close", "details"]);

const dataStore = useUserStore();
const ruleFormRef = ref();
const search = ref("");

const checkAge = () => {
  if (!value) {
    return callback(new Error("Please input the age"));
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error("Please input digits"));
    } else {
      if (value < 18) {
        callback(new Error("Age must be greater than 18"));
      } else {
        callback();
      }
    }
  }, 1000);
};

const ruleForm = reactive({
  company_name: "",
  job_name: "",
});

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      let data = {
        job_name: ruleForm.job_name,
        company_name: ruleForm.company_name,
        page: 1,
      };
      getCqData(data);
      console.log("submit!", ruleForm, data);
    } else {
      console.log("error submit!");
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
const tabs = ref([{ label: "高校", value: "高校" }]);

// async function getOneForm_schoolList() {
//   await OneForm_schoolList({
//     year: "2024",
//     schoolType: activeTab.value,
//     county: '',
//     pageNum: currentPage.value,
//     pageSize: pageSize.value,
//     search: search.value,
//   }).then((res) => {
//     if (res.code == 200) {

//       list.value = res.data.list;
//       total.value = res.data.total;
//       currentPage.value = res.data.pageNum;
//     }
//   });
// }

const activeTab = ref("高校");

function changeTabs(val) {
  activeTab.value = val;
  currentPage.value = 1;
  // getOneForm_schoolList();
}

const list = ref([]);

const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(100);

const handleCurrentChange = (val) => {
  currentPage.value = Number(val);
  getCqData({ job_name: "", company_name: "", page: val });
  // getOneForm_schoolList();
};
const inputChange = () => {
  // getOneForm_schoolList();
};
const getCqData = async (data) => {
  await getCqData_job({
    job_name: data.job_name,
    company_name: data.company_name,
    page: data.page,
  }).then((res) => {
    total.value = Number(res.count?.count || 0);
    list.value = res.data;
  });
  // console.log(data,count,'data~~~~~~~~~');
};
onMounted(() => {
  getCqData({ job_name: "", company_name: "", page: 1 });
});
</script>

<template>
  <Dialog
    :visible="props.visible"
    :title="props.title"
    size="default"
    @close="
      () => {
        emits('close');
        activeTab = '高校';
        currentPage = 1;
        search = '';
      }
    "
    @open="getOneForm_schoolList"
  >
    <div class="box">
      <!-- <el-input
        v-model="search"
        class="ipt"
        placeholder="请输入想搜索的内容"
        @change="inputChange"
      ></el-input>
      <el-input
        v-model="search"
        class="ipt"
        placeholder="请输入想搜索的内容"
        @change="inputChange"
      ></el-input> -->

      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :inline="true"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item label="" prop="company_name">
          <el-input
            v-model="ruleForm.company_name"
            class="ipt"
            placeholder="输入企业名称搜索"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="" prop="job_name">
          <el-input
            v-model="ruleForm.job_name"
            class="ipt"
            placeholder="输入岗位名称搜索"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm(ruleFormRef)"
            class="btn"
          >
            搜索
          </el-button>
          <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
        </el-form-item>
      </el-form>
      <!-- <div class="tabs">
        
      </div> -->
      <div class="tabs-content">
        <div class="tabs-content_c">
          <div class="tabs-content_c_1">序号</div>
          <div class="tabs-content_c_2">企业名称</div>
          <div class="tabs-content_c_3">岗位名称</div>
          <div class="tabs-content_c_4">招聘人数</div>
        </div>
        <div
          class="tabs-content_item"
          v-for="(item, index) in list"
          :key="item.id"
        >
          <div class="tabs-content_item_1">{{ index + 1 }}</div>
          <div class="tabs-content_item_2">{{ item.company_name }}</div>
          <div class="tabs-content_item_3">{{ item.job_name }}</div>
          <div class="tabs-content_item_4">{{ item.need_num }}</div>
        </div>
        <!-- <div class="tabs-content_item">
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
        </div>
        <div class="tabs-content_item">
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
        </div>
        <div class="tabs-content_item">
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
        </div>
        <div class="tabs-content_item">
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
        </div>
        <div class="tabs-content_item">
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
        </div>
        <div class="tabs-content_item">
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
        </div>
        <div class="tabs-content_item">
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
        </div>
        <div class="tabs-content_item">
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
        </div>
        <div class="tabs-content_item">
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
          <div class="tabs-content_item_1">xxx</div>
        </div> -->
      </div>
      <div class="pagination">
        <Pagination
          :currentPage="currentPage"
          :total="total"
          :pageSize="pageSize"
          @currentChange="handleCurrentChange"
        ></Pagination>
      </div>
    </div>
  </Dialog>
</template>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 37px;
  .ipt {
    width: 320px;
    height: 40px;
    ::v-deep .el-input__wrapper {
      background: #0e335b;
      box-shadow: none;
      color: #ffffff;
    }
    ::v-deep .el-input__inner {
      color: #ffffff;
    }
  }
  .btn {
    width: 80px;
    height: 40px;
    background: #1669b6;
    box-shadow: inset 0px 0px 15px 0px rgba(96, 207, 255, 0.8);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #09d6ff;
    ::v-deep .el-button--primary {
      --el-button-bg-color: rgba(96, 207, 255, 0.8);
    }
  }
  ::v-deep .el-input {
    color: #ffffff;
    --el-input-placeholder-color: rgba(201, 233, 248, 0.6);
  }
  .tabs {
    width: 100%;
    margin: 16px 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
    font-weight: normal;
    font-size: 1rem;
    color: rgba(201, 233, 248, 0.8);
    text-align: center;
    font-style: normal;
    .tabs-b {
      background: rgba(20, 45, 104, 0.5);
      border-radius: 0.25rem;
      border: 1px solid;
      border-image: linear-gradient(
          93deg,
          rgba(45, 128, 255, 0.2),
          rgba(37, 145, 207, 1),
          rgba(27, 77, 153, 0.4)
        )
        1 1;
      padding: 0.625rem 0.875rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .tabs-b:hover {
      border: 1px solid #5787d9;
      box-shadow: 0px 2px 4px #5787d9;
      cursor: pointer;
      background: linear-gradient(to bottom, #062c65, #020b34);
    }
  }
  .tipsChecked {
    color: #ffffff;
    background: linear-gradient(
      rgba(113, 226, 241, 0.1) 0%,
      rgba(113, 241, 234, 0.4) 100%
    ) !important;
  }
  .tabs-content {
    width: 100%;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    padding: 0 40px;
    // gap: 12px 10px;
    align-content: flex-start;
    overflow: auto;
    .tabs-content_c {
      width: 100%;
      height: 32px;
      display: flex;
      .tabs-content_c_1 {
        width: 5%;
        height: 100%;
        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 14px;
        color: #c9e9f8;
        line-height: 14px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .tabs-content_c_2 {
        width: 45%;
        height: 100%;
        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 14px;
        color: #c9e9f8;
        line-height: 14px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .tabs-content_c_3 {
        width: 35%;
        height: 100%;
        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 14px;
        color: #c9e9f8;
        line-height: 14px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .tabs-content_c_4 {
        width: 15%;
        height: 100%;
        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 14px;
        color: #c9e9f8;
        line-height: 14px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      margin-bottom: 10px;
    }
    .tabs-content_item {
      width: 100%;
      height: 40px;
      display: flex;
      .tabs-content_item_1 {
        width: 5%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        line-height: 16px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .tabs-content_item_2 {
        width: 45%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        line-height: 16px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .tabs-content_item_3 {
        width: 35%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        line-height: 16px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .tabs-content_item_4 {
        width: 15%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        line-height: 16px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
    .tabs-content_item:nth-of-type(2n) {
      background: rgba(255, 255, 255, 0.05) !important;
    }
    .tabs-content_item:nth-of-type(2n + 1) {
      background: rgba(255, 255, 255, 0.1) !important;
    }
  }
  .pagination {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    // gap: 1.75rem;
    padding-right: 40px;
  }
}
</style>
